<template>
  <div class="bulletin">
    <el-form label-width="130px" @submit.native.prevent="Edit(id)">
      <el-form-item :disabled="true" label="志愿活动名称">
        <el-input v-model="activities.title" placeholder="活动名称" />
      </el-form-item>
      <el-form-item label="志愿者活动封面">
        <img :src="activities.image" style="max-width: 500px; max-height: 400px; width: auto; height: auto;">
      </el-form-item>
      <el-form-item label="活动内容">
        <div>{{ activities.content }} </div>
      </el-form-item>
      <el-form-item label="活动时间">
        <div>{{ activities.sign_up_start }} ~ {{ activities.sign_up_end }} </div>
      </el-form-item>
      <el-form-item label="报名用户信息">
        <div>
          <div><span>用户名：{{ info.name }}</span></div>
          <div><span>性别：{{ info.sex === 1 ? '男' : '女' }}</span></div>
          <div><span>年龄：{{ info.age }}</span></div>
          <div><span>联系方式：{{ info.phone }}</span></div>
          <div><span>身份证号码：{{ info.id_card }}</span></div>
          <div><span>工作单位：{{ info.work_unit }}</span></div>
          <div><span>住址：{{ info.address }}</span></div>
        </div>
      </el-form-item>
      <el-form-item label="审核">
        <el-radio-group v-model="info.audit_status" :disabled="audit_status !== 0">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">审核拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="info.created_at" type="datetime" placeholder="选择发布时间" value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import SingleImage from '@/components/Upload/SingleImage'
import Tinymce from '@/components/Tinymce'
import { parseTime } from '@/utils/index'
export default {
  components: {
    Tinymce
    // SingleImage
  },
  data() {
    return {
      id: this.$route.params.id,
      info: {},
      activities: {},
      audit_status: 0,
      created_at: parseTime(new Date().getTime())
    }
  },
  mounted() {
    this.GetInfoById(this.id)
  },
  methods: {
    GetInfoById(id) {
      this.$http.get('volunteer_forms/' + id).then(response => {
        this.info = response.resource.info
        this.activities = response.resource.info.activities
        this.audit_status = this.info.audit_status
      })
    },
    Edit(id) {
      const params = {
        audit_status: this.info.audit_status,
        created_at: this.info.created_at
      }
      this.$http.patch('volunteer_forms/' + id, params).then(response => {
        this.$success('操作成功')
        this.$router.push('/volunteer-activities/forms')
      })
    }
  }
}
</script>

<style>
.bulletin .el-progress-circle {
  background: #fff;
}
.avatar-uploader {
  position: relative;
}
.avatar-uploader .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  max-width: 500px;
  display: block;
}
</style>
